Step 1 of 3: Creating an Application

Complete the following steps:

In Visual Studio, select File | New Project.
In the New Project dialog box, select either Windows Desktop or Silverlight from the Templates in the left-hand pane.

New Project Dialog Box

Select WPF Application or Silverlight Application, depending on the template you chose.
Enter a Name for your project, for example "QuickStart", and click OK. In a WPF Application, the MainWindow.xaml file will open.
1. If you selected a Silverlight Application, when you click OK, the New Silverlight Application dialog box will appear.
2. Click OK to accept default settings. This will close the New Silverlight Application dialog box and create your project.
3. The MainPage.xaml file should open.
Add the following assemblies to your application by right-clicking the References folder and selecting Add Reference:

WPF: C1.WPF.4.dll

Silverlight: C1.Silverlight.5.dll

In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.
Add the following XAML markup between the <Grid> and </Grid> tags in the MainPage.xaml file:

XAML	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions>

Navigate to the Toolbox and double-click the C1FilePicker icon to add the control to your application.
Edit the C1FilePicker tag so it appears similar to the following:

XAML
Copy Code
<c1:C1FilePicker x:Name="C1FilePicker1" Grid.Row="0" Margin="15" Height="30" SelectedFilesChanged="C1FilePicker_SelectedFilesChanged" />
The markup above gives the control a name, specifies the grid row the control appears in, sets the height of the control and the margin around the control, and indicates an event handler for the SelectedFilesChanged event. You'll add the event handler code in a later step.

XAML	Copy Code
<c1:C1FilePicker x:Name="C1FilePicker1" Grid.Row="0" Margin="15" Height="30" SelectedFilesChanged="C1FilePicker_SelectedFilesChanged" />

Add the following XAML markup beneath the <c1:C1FilePicker> tag and before the </Grid> tag in the MainPage.xaml file:

XAML	Copy Code
<ScrollViewer Grid.Row="1" Margin="15,0,15,0"> <ListBox x:Name="ListBox" /> </ScrollViewer> <StackPanel Grid.Row="2" Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center"> <Button Content="Clear File Selection" Height="30" Margin="0,15,15,15" Name="button1" Width="150" Grid.Row="2" Click="button1_Click" /> <Button Content="Clear List Items" Height="30" Margin="15,15,0,15" Name="button2" Width="150" Grid.Row="2" Click="button2_Click" /> </StackPanel>

XAML

Copy Code

<ScrollViewer Grid.Row="1" Margin="15,0,15,0">
    <ListBox x:Name="ListBox" />
</ScrollViewer>
<StackPanel Grid.Row="2" Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center">
    <Button Content="Clear File Selection" Height="30" Margin="0,15,15,15" Name="button1" Width="150" Grid.Row="2" Click="button1_Click" />
    <Button Content="Clear List Items" Height="30" Margin="15,15,0,15" Name="button2" Width="150" Grid.Row="2" Click="button2_Click" />
</StackPanel>

This markup will add a ListBox control which will allow you to view local images you select using the C1FilePicker control. The markup also adds two buttons which will let you clear the content of the C1FilePicker control and the content of the ListBox.